<template>
    <div>
        <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">
            <!-- <el-radio-button label="top">top</el-radio-button>
            <el-radio-button label="right">right</el-radio-button>
            <el-radio-button label="bottom">bottom</el-radio-button>
            <el-radio-button label="left">left</el-radio-button> -->
        </el-radio-group>

        <el-tabs :tab-position="tabPosition" style="height: 200px; width: 600px;">
            <el-tab-pane label="你的书籍">你的书籍
                <el-table :data="booklist">
                    <el-table-column prop="name" label="书名"></el-table-column>
                    <el-table-column prop="author" label="作者"></el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="你的朋友">你的朋友</el-tab-pane>
            <el-tab-pane label="书库" >书库
                
                    <MyEcharts></MyEcharts>
                
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import MyEcharts from '@/components/MyEcharts.vue';
import axios from 'axios';
export default {
    components: {
        MyEcharts
    },
    created(){
        axios.get("/user").then(res => {
            this.booklist = res.data
        })
    },

    data() {
        return {
            tabPosition: 'left',
            booklist:[
                {name:'《三体》',author:'刘慈欣'},
                {name:'《三国演义》',author:'罗贯中'},

            ]
        };
    }
}
</script>

<style>

</style>